<template>
	<view class="ligth_page">
		<view class="content">
			<view class="title">
				<text>用户注册</text>
			</view>
			<view class="form_wrap">
				<view class="tip">
					<text>填写信息</text>
				</view>
				<uni-forms :modelValue="formData">
					<view class="div_box">
						<uni-forms-item label="姓名">
							<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="false" type="text"
								v-model="formData.name" placeholder="请输入姓名" />
						</uni-forms-item>
					</view>
					<view class="div_box">
						<uni-forms-item label="联系电话">
							<uni-easyinput :placeholderStyle="placeholderStyle" type="number" :inputBorder="false"
								v-model="formData.phone" placeholder="填写绑定的电话号码" />
						</uni-forms-item>
					</view>
					<view class="div_box">
						<uni-forms-item label="康复中心">
							<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="false" type="text"
								v-model="formData.shopName" placeholder="填写您所属的康复中心" />
						</uni-forms-item>
					</view>
					<view class="div_box">
						<uni-forms-item label="职位">
							<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="false" type="text"
								v-model="formData.job" placeholder="填写您的职位信息" />
						</uni-forms-item>
					</view>
				</uni-forms>
			</view>
			<view class="btn">
				<button class="uni-white uni-success-bg" @click="submit">提交</button>
			</view>
			<view class="tip">
				<text>确认无误后点击提交</text>
			</view>
			<view class="copy_right">
				<text>前叉之家版权所有</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		toast,
		getStorageSync
	} from '@/request/utils.js';
	import {
		registerApi
	} from '@/request/api.js'
	import {
		mapMutations
	} from 'vuex';
	export default {
		onLoad: function(options) {

		},
		data() {
			return {
				placeholderStyle: "font-size: 32rpx",

				formData: {
					name: '',
					phone: '',
					shopName: '',
					job: ''
				},
				oid: '',
				uid: ''
			};
		},
		created() {
			this.oid = getStorageSync("oid");
			this.uid = getStorageSync("uid");
			console.log(this.oid, this.uid);
		},
		methods: {
			...mapMutations(['setUserInfo','setLogin']),
			async submit() {
				if(!Object.values(this.formData).every((value)=>{return !!value})){
					toast("请完善信息");
					return;
				}
				let {
					name,
					phone,
					shopName,
					job
				} = this.formData;
				let data = {
					userOpenId: this.oid,
					userUnionId: this.uid,
					nickName: name,
					phoneNumber: phone,
					belongRehabCenter: shopName,
					rehabCenterRole: job
				}
					let res = await registerApi(data);
					if(res.code==200){
						this.setUserInfo(res.data);
						this.setLogin(true)
						this.goToPage('/pages/index/index','switchTab');
					}else{
						toast(res.message);
					}
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 80%;
		margin: auto;
		padding-top: 160rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.title {
			font-size: 50rpx;
			font-weight: bold;
		}

		.form_wrap {
			width: 100%;
			margin-top: 40rpx;

			.tip {
				color: #7F7F7F;
				font-size: 14px;
				padding: 20rpx 0;
				border-bottom: 1px solid #E5E5E5;
			}

			.div_box {
				padding: 20rpx 0;
				border-bottom: 1px solid #E5E5E5;
			}

			.uni-forms-item {
				margin-bottom: 0;
			}
		}

		.btn {
			width: 60%;
			margin-top: 100rpx;
		}

		.tip {
			margin-top: 20rpx;
			color: $text-grey;
			font-size: 28rpx;
		}

		.copy_right {
			margin-top: 50rpx;
			color: #5B6A91;
			font-size: 28rpx;
		}
	}
</style>